<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录验证 - 石墨网络验证</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>系统登录验证</h1>
        <div class="login-form">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" placeholder="请输入密码">
            </div>
            <button id="login-btn" class="btn">登录</button>
            <div id="login-result" class="result"></div>
        </div>
    </div>

    <!-- 引入自定义的登录脚本 -->
    <script src="main.js"></script>
    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 登录按钮点击事件
            document.getElementById('login-btn').addEventListener('click', function() {
                // 获取用户输入的凭证
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                const resultElement = document.getElementById('login-result');

                // 验证输入
                if (!username || !password) {
                    resultElement.textContent = '请输入用户名和密码';
                    resultElement.style.color = 'red';
                    return;
                }

                // 显示加载状态
                resultElement.textContent = '正在发送登录请求...';
                resultElement.style.color = 'blue';

                // 模拟http.post函数（实际项目中应该由其他库提供）
                window.http = {
                    post: function(url, data) {
                        // 模拟API响应
                        setTimeout(function() {
                            // 这里应该是真实的API调用
                            // 为了演示，我们模拟一个成功的响应
                            const mockResponse = {
                                body: {
                                    string: function() {
                                        return '1234567890123456'; // 16位长度，模拟登录成功
                                    }
                                }
                            };

                            const html = mockResponse.body.string();
                            if(html.length == 16){
                                resultElement.textContent = '登录成功';
                                resultElement.style.color = 'green';
                                // 登录成功后跳转到销售页面
                                setTimeout(function() {
                                    window.location.href = 'index.html';
                                }, 1500);
                            }else{
                                resultElement.textContent = '登录失败: ' + html;
                                resultElement.style.color = 'red';
                            }
                        }, 1000);

                        return { body: { string: function() { return ''; } } };
                    }
                };

                // 模拟toast函数
                window.toast = function(message) {
                    resultElement.textContent = message;
                };

                // 调用main.js中的login函数
                login(username, password, 
                    function successCallback(response) {
                        console.log('登录成功，响应:', response);
                    }, 
                    function errorCallback(errorMessage) {
                        resultElement.textContent = errorMessage;
                        resultElement.style.color = 'red';
                    }
                );
            });
        });
    </script>
</body>
</html>